<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">我是div</div>
    <!-- <input type="text" class="myinput" /> -->
    <button>点击</button>
    <script>
      // 一、元素的文本或者是超文本；
      // 1.获取或者设置超文本html
      // innerHTML = "替换"
      // jq里全部方法都是函数；
      // $("button").click(function(){
      //     // 获取超文本
      // //    var res =  $(".box").html();
      // //    console.log(res);
      // // 设置超文本
      //     $(".box").html("<h1>替换内容</h1>");
      // })

      // 2.获取或者设置文本
      //       $("button").click(function(){
      //     // 获取文本
      // //    var res =  $(".box").text();
      // //    console.log(res);
      // // 设置文本
      //     $(".box").text("<h1>替换内容</h1>");
      // })

      // 二、表单值的获取和设置；
      // $("button").click(function(){
      //     // 获取表单里的值
      // //   var res =   $(".myinput").val();
      // //   console.log(res);
      // // 设置表单里的值
      //     $(".myinput").val("替换的值");
      // })

      // 语法宽松
      // innerHTML();
      // val();
      // 三、样式的设置 css
      // 1.可以获取css样式；一个参数 ，如果是获取的多个元素 ，那么样式只会获取第一个元素的
      // $("button").click(function(){
      //     console.log(111);
      //    var res =  $(".box").css("background");
      //    console.log(res);
      // })

      // 2.设置css样式
      // 1.设置一个样式
      // $("button").click(function(){
      //     $(".box").css("background","blue");
      // })
      // 2.设置多个样式
      // $("button").click(function(){
      //     $(".box").css({background:"blue",width:"300px",height:300});
      // })
    </script>
  </body>
</html>
